<template>
  <div>

    <div style="width: 1200px;height: 500px">
      <chart
        :options="bar"
        autoresize
      />
    </div>
    <div>
      <div style="float:left; width: 400px;height: 400px">
        <chart
                :options="pieone"
                autoresize
        />
      </div>
      <div style="float:left; width: 400px;height: 400px">
        <chart
                :options="pietwo"
                autoresize
        />
      </div>
      <div style="float:left; width: 400px;height: 400px">
        <chart
                :options="piethree"
                autoresize
        />
      </div>
      <div class="clearfix"></div>
    </div>
    <div>
      <div style="float:left; width: 400px;height: 400px">
        <chart
                :options="piefour"
                autoresize
        />
      </div>
      <div style="float:left; width: 400px;height: 400px">
        <chart
                :options="piefive"
                autoresize
        />
      </div>
      <div style="float:left; width: 400px;height: 400px">
        <chart
                :options="piesix"
                autoresize
        />
      </div>
      <div class="clearfix"></div>
    </div>
    <div>
      <div style="float:left; width: 400px;height: 400px">
        <chart
                :options="pieseven"
                autoresize
        />
      </div>
      <div style="float:left; width: 400px;height: 400px">
        <chart
                :options="pieeight"
                autoresize
        />
      </div>
      <div style="float:left; width: 400px;height: 400px">
        <chart
                :options="pienine"
                autoresize
        />
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</template>

<style>
  /**
   * The default size is 600px×400px, for responsive charts
   * you may need to set percentage values as follows (also
   * don't forget to provide a size for the container).
   */
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/map'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'

export default {
  components: {
    'chart': ECharts
  },
  data () {
    return {

      bar: {

        title: {
          text: '天河区各校物理单科选科人数',
          /* subtext: '纯属虚构',*/
          x: 'center'
        },
        color: ['#3398DB'],
        grid: {
          left: '10%',
          bottom: '35%'
        },
        xAxis: {
          type: 'category',

          axisLabel: {
            interval: 0,
            formatter: function (value) {
              return value.split('').join('\n')
            }

          },
          data: ['华南师范大学附属中学', '广东实验中学附属天河学校', '广州市天河区外国语学校', '广州市第四十七中学', '广州市天荣中学', '广州市华美英语实验学校', '广州市天秀中学', '广州市恒福中学高中部', '华南理工大学附属中学']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [713, 420, 430, 621, 541, 724, 192, 471, 360],
          type: 'bar',
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }

          }
        }]
      },
      pieone: {

        title: {
          text: '华南师范大学附属中学物理单科选科分析',
            x:'center',
            y: 'bottom'
        },

        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: 27, name: '男生' },
              { value: 7, name: '女生' },
              { value: 66, name: '总人数' }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} :\n  {c}人 \n ({d}%)'
                }
              }
            }
          }
        ]
      },
        pietwo: {

            title: {
                text: '广东实验中学附属中学物理单科选科分析',
                x:'center',
                y: 'bottom'
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 23, name: '男生' },
                        { value: 13, name: '女生' },
                        { value: 67, name: '总人数' }
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} :\n  {c}人 \n ({d}%)'
                            }
                        }
                    }
                }
            ]
        },
        piethree: {

            title: {
                text: '广州市天河外国语学校物理单科选科分析',
                x:'center',
                y: 'bottom'
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 28, name: '男生' },
                        { value: 6, name: '女生' },
                        { value: 66, name: '总人数' }
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} :\n  {c}人 \n ({d}%)'
                            }
                        }
                    }
                }
            ]
        },
        piefour: {

            title: {
                text: '广州市第四十七中学物理单科选科分析',
                x:'center',
                y: 'bottom'
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 23, name: '男生' },
                        { value: 10, name: '女生' },
                        { value: 67, name: '总人数' }
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} :\n  {c}人 \n ({d}%)'
                            }
                        }
                    }
                }
            ]
        },
        piefive: {

            title: {
                text: '广州市天荣中学物理单科选科分析',
                x:'center',
                y: 'bottom'
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 28, name: '男生' },
                        { value: 6, name: '女生' },
                        { value: 66, name: '总人数' }
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} :\n  {c}人 \n ({d}%)'
                            }
                        }
                    }
                }
            ]
        },
        piesix: {

            title: {
                text: '华美英语实验学校学物理单科选科分析',
                x:'center',
                y: 'bottom'
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 27, name: '男生' },
                        { value: 7, name: '女生' },
                        { value: 66, name: '总人数' }
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} :\n  {c}人 \n ({d}%)'
                            }
                        }
                    }
                }
            ]
        },
        pieseven: {

            title: {
                text: '广州市天秀中学物理单科选科分析',
                x:'center',
                y: 'bottom'
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 28, name: '男生' },
                        { value: 6, name: '女生' },
                        { value: 66, name: '总人数' }
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} :\n  {c}人 \n ({d}%)'
                            }
                        }
                    }
                }
            ]
        },
        pieeight: {

            title: {
                text: '广州市恒福中学物理单科选科分析',
                x:'center',
                y: 'bottom'
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 27, name: '男生' },
                        { value: 7, name: '女生' },
                        { value: 66, name: '总人数' }
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} :\n  {c}人 \n ({d}%)'
                            }
                        }
                    }
                }
            ]
        },
        pienine: {

            title: {
                text: '华南理工大学附属中学物理单科选科分析',
                x:'center',
                y: 'bottom'
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 23, name: '男生' },
                        { value: 10, name: '女生' },
                        { value: 67, name: '总人数' }
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} :\n  {c}人 \n ({d}%)'
                            }
                        }
                    }
                }
            ]
        }
    }
  }
}
</script>
